<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>电子请假条</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1,minimun-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

    <meta http-equiv="pragma" content="no-cache">
<style>
body{
	background-color: #1777ff;
	width: 703px;
	height: 1000px;
}

.box {
	/*background-color: #626761;*/
	background: linear-gradient(to bottom,#b86401 40%,#653291,#3403ff);
        width: 760px;
        height: 1350px;
		margin: 0 auto;
		margin-top: -10px;
        margin-left: 10px
    }
    
    .gzz {
        padding-left: 20px;
        padding-top: 80px;
        display: flex;
        width: 400px;
        height: 30px;
    }
    
    .right {
        padding-left: 10px;
    }
    
    .right h3 {
        font-size: 50px;
        color: #fff;
        margin: 0px;
    }
    
    
     .right p{
        font-size: 20px;
        color: #75adff;
        margin: 0px;
    }
    
    .zw {
        margin-top: 120px;
        margin-left: 20px;
		background-color: #fff;
		width: 690px;
		height: 690px;
		border-radius: 10px; 
		padding-left: 33px;
    }
    
	.zp {
		width: 280px;
		height: 345px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 0 1px rgba(0,0,0,0.2);
		float: right;
		margin-right: 28px;
		margin-top: -26px;
	}
	 
	 .zp img{
		 margin-top: 12px;
		 margin-left: 52px;
	 }
	 
    .zw h4 {
        font-weight: normal;
        margin-top: 90px;
        margin-bottom: 20px;
        font-size: 31px;
        color: #1b75e5;
    }
    
    .zw p {
        margin-top: 38px;
        font-size: 48px;
    }
    
    .zw .js {
        width: 600px;
        height:110px;
    }
    
    .xx p {
        font-size: 34px;
        color: #858585;
        margin-left: 60px;
        margin-bottom: 40px;
        
    }
    
    .xx img {
        float: left;
		height: 36px;
		margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .showTime {
        font-weight: bold;
        font-size: 86px;
        margin-left: 20px;
		margin-top: 32px;
		background-color: #fff;
		width:700px;
		height: 290px;
		border-radius: 5px;
		padding-left: 22px;
		padding-top: 8px;
    }
    
    .xx {
        margin-top: 160px;
    }
    
    .mc {
        margin-top: 15px;
        height: 30px;
        display: flex;
    }
    
    .mc img {
        margin-left: 10px;
        margin-top: 11px;
    }
    
    .zj h2 {
        margin-left: 8px;
        margin-top:  0px;
        font-size: 32px;
        color: #1777ff;
    }
    
    .zj {
        margin-top: 10px;
        height: 0px;
        display: flex;
    }
	.zj img{
		margin-top: 0px;
		height: 41px;
	}
</style>

</head>

<body>
		<div class="box">
		    <div class="gzz">
		        <div class="left"><img src="./01.png" style="width: 110px; ">
		        </div>
		        <div class="right">
		            <h3>请假条</h3>
                    <p>No.</p>
		        </div>
		    </div>
		    <div class="zw">
		        <div class="zp">
		                            <img src="./人像.png" style="height:320px;" />
		                        </div>
		        <div class="js">
		            <div class="mc">
		                <p>陈李婉</p>
		            </div>
		            <h4>塘栖校区计算机（IT）2201</h4>
		
		            <div class="zj">
		                <img src="./02.png">
		                <h2>校区：</h2>
		            </div>
		        </div>
		
		        <div class="xx">
		            <img src="./03.png">
		            <p>性别：男</p>
		            <img src="./04.png">
		            <p>外出时间：2025-10-16 11:30:00</p>
		            <img src="./05.png">
		            <p>返回时间：2025-10-16 15:00:00</p>
		            <img src="./06.png">
		            <p>请假原因：采购</p>
		
		
		        </div>
		
		    </div>
		    <div class="showTime">2021年2月19-20时35分16秒</div>
		    <script>
		        var t = null;
		        t = setTimeout(time, 1000); //開始运行
		        function time() {
		            clearTimeout(t); //清除定时器
		            dt = new Date();
		            var y = dt.getFullYear();
		            var mt = dt.getMonth() + 1;
		            var day = dt.getDate();
		            var h = dt.getHours(); //获取时
		            var m = dt.getMinutes(); //获取分
		            var s = dt.getSeconds(); //获取秒
		            document.querySelector(".showTime").innerHTML =
		                "" +
		                y +
		                "年" +
		                mt +
                        "月" +
		                day +
		                "日" +
		                h +
		                ":" +
		                m +
		                ":" +
		                s +
		                "";
		            t = setTimeout(time, 1000); //设定定时器，循环运行
		        }
		    </script>
		</div>
		</div>
        <script>
        /* 设置自动关闭时间（格式：年-月-日 时:分:秒）*/
        const closeTime = new Date('2025-10-17 21:00:00'); /*修改此处时间*/
        const now = new Date();
        
        /*计算剩余毫秒数*/
        const timeout = closeTime - now;
        
        if (timeout > 0) {
            setTimeout(() => {
                /*需用户允许弹窗关闭，部分浏览器可能拦截*/
                window.close();
            }, timeout);
        } else {
            window.close(); /* 时间已过则立即关闭*/
        }
    </script>
</body>
</html>